<template>
  <div class="infoMain">
    <Breadcrumb :breadName="`${info.title}`" class="breadCrumd" />
    <div class="infoBox">
      <div class="infoImgBox">
        <img :src="info.cover" />
      </div>
      <div class="infoTextBox">
        <h1>{{info.title}}</h1>
        <p>政策类型: <span>{{info.type}}</span></p>
        <p>发布时间: <span>{{info.releaseTime}}</span></p>
        <p>点击次数: <span>{{info.clickNum}}</span></p>
      </div>
    </div>
    <div class="infoContent">
      <div class="contentTitle">
        <span>内容</span>
      </div>
      <div class="contentText">
        <p>{{info.content}}</p>
      </div>
    </div>
  </div>
</template>

<script>
import { reqGetFuPinList } from "../../../../api";
export default {
  data() {
    return {
      info: {},
    };
  },
  created() {
    this.getInfo();
  },
  methods: {
    async getInfo() {
      let result = await reqGetFuPinList({
        pageNum: 1,
        pageSize: 1,
        id: this.$route.params.id,
      });
      if (result.code != 200) return console.error("faile");
      this.info = result.data.list[0];
    },
  },
};
</script>

<style lang="less" scoped>
.infoMain {
  width: 50%;
  margin: 30px auto;
  .breadCrumd {
    background-color: lightblue;
    padding: 15px;
    border-radius: 9px;
  }
  .infoBox {
    display: flex;
    .infoImgBox {
      flex: 0.5;
      img {
        width: 320px;
        height: 320px;
      }
    }
    .infoTextBox {
      flex: 0.5;
      h1 {
        color: #000;
        text-align: center;
      }
      p {
        margin: 28px 0px;
        span{
            margin-left: 50px;
        }
      }
      .special {
        padding-left: 30px;
      }
    }
  }
  .infoContent{
      border: 1px solid grey;
      height: 300px;
      margin-top: 20px;
      .contentTitle{
          height: 30px;
          background-color: lightgrey;
          span{
              line-height: 30px;
              box-sizing: border-box;
              display: inline-block;
              height: 30px;
              padding: 0 5px;
              background-color: #fff;
              font-size: 14px;   
              border-right: 1px solid silver;       
            }
      }
      .contentText{
          margin: 10px;
      }
  }
}
</style>